﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Calculate Long Routes Example</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
          var map,
          bingMapsKey = "Your Bing Maps Key";

          //Waypoint locations can be a mix of addresses and waypoints
          var testLocations = [
                    "1 Microsoft Way, Redmond, WA",
                    "Seattle, WA",
                    "Space Needle",
                    new Microsoft.Maps.Location(47.5886, -122.336),
                    new Microsoft.Maps.Location(47.5553, -122.334),
                    new Microsoft.Maps.Location(47.5557, -122.316),
                    new Microsoft.Maps.Location(47.5428, -122.322),
                    new Microsoft.Maps.Location(47.5425, -122.341),
                    new Microsoft.Maps.Location(47.5538, -122.362),
                    new Microsoft.Maps.Location(47.5647, -122.384),
                    new Microsoft.Maps.Location(47.5309, -122.380),
                    new Microsoft.Maps.Location(47.5261, -122.351),
                    new Microsoft.Maps.Location(47.5137, -122.382),
                    new Microsoft.Maps.Location(47.5101, -122.337),
                    new Microsoft.Maps.Location(47.4901, -122.341),
                    new Microsoft.Maps.Location(47.4850, -122.320),
                    new Microsoft.Maps.Location(47.5024, -122.263),
                    new Microsoft.Maps.Location(47.4970, -122.226),
                    new Microsoft.Maps.Location(47.4736, -122.265),
                    new Microsoft.Maps.Location(47.4562, -122.287),
                    new Microsoft.Maps.Location(47.4452, -122.338),
                    new Microsoft.Maps.Location(47.4237, -122.292),
                    new Microsoft.Maps.Location(47.4230, -122.257),
                    new Microsoft.Maps.Location(47.3974, -122.249),
                    new Microsoft.Maps.Location(47.3765, -122.277),
                    new Microsoft.Maps.Location(47.3459, -122.302),
                    new Microsoft.Maps.Location(47.3073, -122.280),
                    new Microsoft.Maps.Location(47.3115, -122.228),
                    new Microsoft.Maps.Location(47.2862, -122.218),
                    new Microsoft.Maps.Location(47.2714, -122.294),
                    new Microsoft.Maps.Location(47.2353, -122.306),
                    new Microsoft.Maps.Location(47.1912, -122.408)
              ];

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: bingMapsKey });

              //Register and load the RouteServiceHelper Module
              Microsoft.Maps.registerModule("RouteServiceHelper", "scripts/RouteServiceHelper.js");
              Microsoft.Maps.loadModule("RouteServiceHelper");

              var testLoc = ["<b>Test Waypoints</b><br/>"];
              for (var i = 0; i < testLocations.length; i++) {
                    testLoc.push(i + 1, '. ');

                    if(typeof testLocations[i] == 'string'){
                        testLoc.push(testLocations[i]);
                    } else if (testLocations[i].latitude != null && testLocations[i].longitude != null) {
                        testLoc.push(testLocations[i].latitude, ',', testLocations[i].longitude);
                    }

                    testLoc.push('<br/>');
              }

            document.getElementById('testLocations').innerHTML = testLoc.join('');
          }

          function CalculateRoute() {
              map.entities.clear();

              //Create route options
              var options = {
                  avoid: null,
                  distanceBeforeFirstTurn: 0,
                  heading: null,
                  optimize: 'time',
                  routePathOutput: 'Points',
                  travelMode: 'Driving',
                  distanceUnit: 'km',
                  culture: null,
                  batchSize: 15
              };

              document.getElementById('statusDiv').innerHTML = "Calculating Route...";

              map.getCredentials(function (key) {
                  RouteServiceHelper.GetRoute(testLocations, key, options, RouteCallback);
              });
          }

          function RouteCallback(result) {
              if (result && result.statusCode == 200 &&
                    result.resourceSets &&
                    result.resourceSets.length > 0 &&
                    result.resourceSets[0].resources &&
                    result.resourceSets[0].resources.length > 0) {

                  document.getElementById('statusDiv').innerHTML = "Route Calculated.";

                  var res = result.resourceSets[0].resources[0];

                  //Set map view based on bounding box
                  map.setView({ bounds: Microsoft.Maps.LocationRect.fromEdges(res.bbox[2], res.bbox[1], res.bbox[0], res.bbox[3]), padding : 20 });

                  //Draw route path
                  if (res.routePath && res.routePath && res.routePath.line
                        && res.routePath.line.coordinates
                        && res.routePath.line.coordinates.length >= 2) {
                      var p = [],
                      c = res.routePath.line.coordinates;

                      for (var i = 0; i < c.length; i++) {
                          p.push(new Microsoft.Maps.Location(c[i][0], c[i][1]));
                      }

                      map.entities.push(new Microsoft.Maps.Polyline(p, { strokeColor: new Microsoft.Maps.Color(156, 0, 0, 255) }));
                  }

                  //Draw Waypoints
                  for (var i = 0; i < res.routeLegs.length; i++) {
                      map.entities.push(new Microsoft.Maps.Pushpin(
                          new Microsoft.Maps.Location(res.routeLegs[i].actualStart.coordinates[0], res.routeLegs[i].actualStart.coordinates[1]), {
                            text : i + 1 + ''
                          }));
                    }

                    map.entities.push(new Microsoft.Maps.Pushpin(
                          new Microsoft.Maps.Location(res.routeLegs[res.routeLegs.length - 1].actualEnd.coordinates[0], res.routeLegs[res.routeLegs.length - 1].actualEnd.coordinates[1]), {
                              text: res.routeLegs.length + 1 + ''
                          }));
              } else if (result && result.statusCode != 200) {
                    document.getElementById('statusDiv').innerHTML = "Error: " + result.errorDetails;
              }
          }
      </script>
   </head>
   <body onload="GetMap();">
        <div style='position:relative'>
            <div id='myMap' style="position:relative;float:left;width:600px;height:500px;"></div>
            <div style="position:relative;float:left;margin-left:10px;">
                <div id='testLocations'></div> 
                <input type="button" value="Calculate Route" onclick="CalculateRoute()"/><div id='statusDiv'></div>
            </div>
        </div>
   </body>
</html>